<template>
  <div class="box">
    <div class="title">TODO LIST</div>
    <todo-input @add="addNew"></todo-input>
    <todo-list :list="list" @update-row="updateRow" @delete-row="deleteRow"></todo-list>
  </div>
</template>

<script>
import todoInput from "./components/todoInput";
import todoList from "./components/todoList";

export default {
  name: "App",
  data() {
    return {
      list: [],
    };
  },
  components: {
    todoInput,
    todoList,
  },
  watch: {},
  methods: {
    addNew(value, time) {
      const data = {
        id: time,
        value,
        status: 1, // 0在执行 1待执行 2已完成
        created: time,
        finished: null,
      };
      // 判断是否存在正在执行
      const inx = this.list.length && !this.list[0].status;
      this.list.splice(inx, 0, data);
    },
    // 更新
    updateRow(inx, status) {
      switch (status) {
        case 0:
          this.toDoing(inx);
          break;
        case 1:
          this.list[inx].status = 1;
          break;
        case 2:
          this.toFinish(inx);
          break;
      }
    },
    // 去执行
    toDoing(inx) {
      this.list[inx].status = 0;
      // 找出正在干活的索引
      const isDoing = this.list.length && !this.list[0].status;
      // 如果存在则换位置 如果没有就去第一位
      if (isDoing) this.$set(this.list[0], "status", 1);
      const cur = this.list.splice(inx, 1)[0];
      this.list.unshift(cur);
    },
    toFinish(inx) {},
    // 删除
    deleteRow(inx) {
      // this.list = this.list.filter((item) => item.id != id);
    },
  },
};
</script>

<style scoped>
.box {
  width: 600px;
  /* border: 1px solid #000; */
  /* margin-top: 20vh; */
  height: 50vh;
  color: #666;
}
.title {
  font-size: 40px;
  font-weight: 600;
  color: #666;
  text-align: center;
  height: 20vh;
  line-height: 20vh;
}
</style>
